<template>
  <div class="pagebox">
    <div class="app-container">
      <a-row type="flex" :gutter="10">
        <a-col :span="9" style="margin-top: 16px">
          <!--  日历-->
          <div class="bg calendarBox">
            <a-calendar
              v-model="selectTime"
              :header-render="headerRender"
              @panelChange="onPanelChange"
              @select="selectDay"
            >
              <template slot="dateCellRender" slot-scope="value">
                <div v-if="getdate(value)" class="notes-month">
                  <!-- <span class="dateSpan">已签到</span> -->
                  <span class="dateSpan"></span>
                </div>
              </template>
            </a-calendar>
          </div>
          <!--          班次2-->
          <div class="classesList bg">
            <h4 class="colorin">{{ params.day }}</h4>
            <div class="ShiftlistBOX">
              <ul v-if="ShiftList.length > 0">
                <li
                  v-for="(item, index) in ShiftList"
                  :key="index"
                  :class="classesIndex == index ? 'liActive' : ''"
                  @click="changeCLASS(index, item)"
                >
                  <div class="classesTitle">
                    <i class="iconfont">&#xe68f;</i>
                    <span>{{ item.shiftName || '' }}</span>
                  </div>
                  <div class="classesTime">
                    <p>
                      <span class="classesTimeTitle">上班时间</span>
                      <span class="classesTimettime colorin">{{ item.startTime }}~{{ item.endTime }}</span>
                    </p>
                    <p>
                      <span class="classesTimeTitle">打卡时间</span>
                      <span>
                        <a>
                          {{ puchTime(item.startTime, item.endTime, item.signInTime, index) }}
                        </a>
                        {{ item.signInTime ? '(' + item.signInTime + ')' : '' }}
                      </span>
                    </p>
                  </div>
                  <div
                    class="punchClock"
                    @click="openequ(item.startTime, item.endTime, item.signInTime, index, item)"
                    style="width: 104px;"
                  >
                    <p
                      :class="
                        puchTime(item.startTime, item.endTime, item.signInTime, index) === '已打卡'
                          ? ''
                          : puchTime(item.startTime, item.endTime, item.signInTime, index) === '超时'
                          ? ''
                          : 'activep'
                      "
                      style="width:100%"
                    >
                      <i class="iconfont">&#xe646;</i>
                      {{ puchTime(item.startTime, item.endTime, item.signInTime, index) }}
                    </p>
                  </div>
                </li>
              </ul>
              <a-empty v-else style="margin-top:10px" />
            </div>
          </div>
        </a-col>
        <!--        中间-->
        <a-col :span="7" style="margin-top: 16px">
          <div class="bg" style="padding: 10px 20px; overflow: hidden">
            <div class="lookMoreTitle ">
              <p class="colorin">
                {{ nowshift ? nowshift.shiftName : '' }}
                {{ nowshift.startTime || '00:00:00' }}~{{ nowshift.endTime || '00:00:00' }}
              </p>
              <h4 class="" @click="CheckIn">物料登记 ></h4>
            </div>
            <div>
              <!--              环形图-->
              <div style="width: 50%; float: left">
                <pieCharts v-if="pieData.length > 0" :chartData="pieData" />
              </div>
              <!--              环形图图例-->
              <div style="width: 50%; float: left" class="pielegendbox">
                <p class="pielegend" v-for="(item, index) in pieData" :key="index">
                  <span class="quan" v-if="item.name == '运行'" :style="{ 'border-color': alarmStatues[index] }"></span>
                  <!-- <span class="quan" v-if="item.name == '其他运行'" :style="{ 'border-color': alarmStatues[1] }"></span> -->
                  <span class="name">{{ item.name === '其他运行' ? '设备运行总时长' : '运行' }}</span>
                  <span class="value">{{ item.str || 0 }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="bg" style="padding: 5px 20px; overflow: hidden">
            <div class="lookMoreTitle ">
              <p class="colorin">运行排名</p>
              <h4 class="" @click="opvisiblerank">查看更多 ></h4>
            </div>
            <div>
              <a-table
                @change="handleChange"
                :columns="columns"
                :data-source="ProduceRankData"
                size="middle"
                :pagination="false"
                :rowKey="
                  (record, index) => {
                    return index;
                  }
                "
              >
                <a slot="name" slot-scope="text, record, index" style="color: #0eaee0">{{ index + 1 }}</a>
                <a slot="macNumb" slot-scope="text" style="color: #0eaee0">{{ text }}</a>
              </a-table>
            </div>
          </div>
          <div class="bg" style="padding: 20px; overflow: hidden; margin-top: 20px">
            <div class="lookMoreTitle ">
              <p class="colorin">报警信息</p>
            </div>
            <div>
              <a-table
                :columns="alarmcolumns"
                :data-source="getAllAlarmData"
                size="middle"
                :pagination="false"
                :rowKey="
                  (record, index) => {
                    return index;
                  }
                "
              >
                <a slot="macNumb" slot-scope="text" style="color: #0eaee0">{{ text }}</a>
              </a-table>
              <div style="padding: 20px">
                <a-pagination
                  size="small"
                  :total="getAllAlarmtotal"
                  :show-total="(total) => `一共 ${getAllAlarmtotal} 条`"
                  :default-page-size="4"
                  @change="changepageAllAlarm"
                />
              </div>
            </div>
          </div>
        </a-col>
        <!--        右边-->
        <a-col :span="8" style="margin-top: 16px">
          <div class="bg" style="padding: 5px 20px; overflow: hidden">
            <div class="lookMoreTitle ">
              <p class="colorin">产量趋势</p>
              <!-- <h4 class="">查看详情 ></h4> -->
            </div>
            <line-chart :chart-data="getProduceHourData" :height="'410px'"></line-chart>
          </div>
          <div class="bg" style="padding: 20px; overflow: hidden; margin-top: 20px">
            <div class="lookMoreTitle ">
              <p class="colorin">打卡信息</p>
            </div>
            <div>
              <a-table
                :columns="SignIncolumns"
                :data-source="SignInData"
                size="middle"
                :pagination="false"
                :rowKey="
                  (record, index) => {
                    return index;
                  }
                "
              ></a-table>
              <div style="padding: 20px">
                <a-pagination
                  size="small"
                  :total="SignIntotal"
                  :show-total="(total) => `一共 ${SignIntotal} 条`"
                  :default-page-size="4"
                  @change="changepageSignIn"
                />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-modal
      title="物料登记"
      :visible="visibleCheckIn"
      :confirm-loading="confirmLoading"
      footer=""
      @cancel="handleCancel"
    >
      <div>
        <div class="topshifts">
          <h3>{{ params.day }}</h3>
          <div class="shiftsmsg">
            <h4>{{ nowshift.shiftName }}</h4>
            <p>{{ nowshift.startTime }}~{{ nowshift.endTime }}</p>
          </div>
          <!-- <a-button type="primary" class="addbutton">添加班次</a-button> -->
        </div>
        <a-form-model :rules="rules" ref="formRef" :model="forms" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <div style="margin-bottom: 10px">
            <a-form-model-item label="选择订单" size="small">
              <a-select
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                default-value=""
                @change="handletaskChange"
              >
                <a-select-option :value="item.taskId" v-for="(item, index) in TaskList" :key="index">
                  {{ item.taskInfo }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="领料数量" prop="pickCount">
              <a-input placeholder="领料数量" v-model="forms.pickCount" />
            </a-form-model-item>
            <a-row class="shiftsli" v-for="(item, index) in forms.wasters" :key="index">
              <a-col :span="12">
                <a-form-model-item label="废件类型" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
                  <a-select
                    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                    default-value="工废"
                    v-model="item.type"
                  >
                    <a-select-option :value="type" v-for="(type, typeindex) in typeArray" :key="typeindex">
                      {{ type }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="数量">
                  <a-input placeholder="数量" v-model="item.wasterCount" />
                </a-form-model-item>
              </a-col>
              <p @click="detalfrom(index)" v-if="index != 0" class="iconcancle">
                <a-icon type="close-circle" style="color: red" />
              </p>
              <p @click="addfrom(index)" v-if="index == 0" style="right: -15px; color: #1890ff" class="iconcancle">
                <a-icon type="plus-circle" style="color: #1890ff" />
                添加废件
              </p>
            </a-row>
            <a-form-model-item label="废件原因">
              <a-input placeholder="废件原因" v-model="forms.wasterReason" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <div class="footerBtn">
                <a-button type="primary" @click="handleOk">
                  确定
                </a-button>
                <a-button style="margin-left: 10px;" @click="handleCancel">
                  取消
                </a-button>
              </div>
            </a-form-model-item>
          </div>
          <!--          <a-button type="primary" icon="plus" @click="addSchedullist" size="small">-->
          <!--            添加-->
          <!--          </a-button>-->
        </a-form-model>
      </div>
    </a-modal>

    <a-modal
      title="运行排行"
      v-model="visiblerank"
      :confirm-loading="confirmLoading"
      @ok="handleOkrank"
      @cancel="handleCancelrank"
    >
      <div>
        <a-table
          :columns="columns"
          :data-source="ProduceRankDatatable"
          size="middle"
          :pagination="false"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
        >
          <a slot="name" slot-scope="text, record, index" style="color: #0eaee0">{{ index + 1 }}</a>
          <a slot="macNumb" slot-scope="text" style="color: #0eaee0">{{ text }}</a>
        </a-table>
        <div style="padding: 20px">
          <a-pagination
            size="small"
            :total="ProduceRanktotal"
            :show-total="(total) => `一共 ${ProduceRanktotal} 条`"
            :default-page-size="4"
            @change="changepageRank"
          />
        </div>
      </div>
    </a-modal>

    <a-modal
      title="选择设备"
      v-model="visibequ"
      :confirm-loading="confirmLoading"
      width="50%"
      @ok="handleOkequ"
      @cancel="handleCancelequ"
    >
      <div>
        <a-table
          :columns="columnsequ"
          :data-source="sequdata"
          childrenColumnName="MacSNs"
          class="components-table-demo-nested"
          :rowKey="
            (record, index) => {
              return record.macsn ? record.macsn : record.groupid;
            }
          "
          size="middle"
          :pagination="false"
          :row-selection="rowSelection"
        >
          <!-- <a-table
            slot="expandedRowRender"
            slot-scope="text, record"
            :columns="innerColumns"
            :data-source="record.MacSNs"
            :pagination="false"
             :rowKey="(record, index) => { return index;}"
              size="middle"
          >
         
          </a-table> -->
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
import lineChart from './component/linechart';
import pieCharts from './component/pieCharts';
import { initUserInfo } from '@/unit/tool';
let alarmStatues = ['#3FC529', '#FBC225', '#E74629', '#E2E7EE'];
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    title: '排名',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '机床名称',
    dataIndex: 'macNumb',
    key: 'agmacNumbe',
    scopedSlots: { customRender: 'macNumb' },
  },
  {
    title: '运行时间',
    dataIndex: 'time',
    key: 'time',
    sorter: (a, b) => a.timeStamp - b.timeStamp,
  },
  {
    title: '加工件数',
    key: 'count',
    dataIndex: 'count',
  },
];
const alarmcolumns = [
  {
    dataIndex: 'macNumb',
    key: 'macNumb',
    title: '报警机床',
    width: 100,
    scopedSlots: { customRender: 'macNumb' },
  },
  {
    title: '报警时间',
    dataIndex: 'time',
    key: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '报警内容',
    dataIndex: 'alarmData',
    key: 'alarmData',
  },
];
const SignIncolumns = [
  {
    dataIndex: 'name',
    key: 'name',
    title: '姓名',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '打卡时间',
    dataIndex: 'time',
    key: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '设备号',
    dataIndex: 'macNumb',
    key: 'macNumb',
  },
];
const columnsequ = [
  {
    dataIndex: 'groupname',
    key: 'groupname',
    title: '姓名',
    // scopedSlots: { customRender: "groupname" },
  },
  {
    dataIndex: 'macnum',
    key: 'macnum',
    title: '设备编号',
    // scopedSlots: { customRender: "macnum" },
  },
  {
    dataIndex: 'macsn',
    key: 'macsn',
    title: '设备型号',
    // scopedSlots: { customRender: "macsn" },
  },
  {
    dataIndex: 'mactype',
    key: 'mactype',
    title: '设备类型',
    // scopedSlots: { customRender: "mactype" },
  },
];
const innerColumns = [
  {
    dataIndex: 'macnum',
    key: 'macnum',
    title: '设备编号',
    // scopedSlots: { customRender: "macnum" },
  },
  {
    dataIndex: 'macsn',
    key: 'macsn',
    title: '设备型号',
    // scopedSlots: { customRender: "macsn" },
  },
  {
    dataIndex: 'mactype',
    key: 'mactype',
    title: '设备类型',
    // scopedSlots: { customRender: "mactype" },
  },
];
import api from '@/api/equipment';
import wapi from '@/api/workshop';
import { formatCurrentMonth, getLastDay, timeCalculation } from '@/unit/tool';
import moment from 'moment';

export default {
  name: 'index',
  components: {
    lineChart,
    pieCharts,
  },
  data() {
    return {
      dateType: 1,
      getProduceHourData: {
        expectedData: [],
        date: [],
        name1: '产量',
      },
      pieData: [
        { value: '0', name: '运行', str: 0 },
        { value: '0', name: '总运行', str: 0 },
      ],
      alarmStatues: alarmStatues,
      columns,
      alarmcolumns,
      SignIncolumns,
      nowshift: {},
      classesIndex: 0,
      params: {},
      haveAllDayList: false,
      getAllDayList: [],
      calendarParams: {},
      ShiftList: [],
      ProduceRankParams: {
        pageSize: 4,
        pageNum: 1,
        countSort: 'desc',
      },
      ProduceRankData: [],
      ProduceRankDatatable: [],
      ProduceRanktotal: 0,
      SignInParams: {
        pageSize: 4,
        pageNum: 1,
        shiftId: '',
      },
      SignInData: [],
      SignIntotal: 0,
      getAllAlarmParams: {
        pageSize: 4,
        pageNum: 1,
      },
      getAllAlarmData: [],
      getAllAlarmtotal: 0,
      visibleCheckIn: false,
      confirmLoading: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      moment: moment,
      forms: {
        wasters: [{ type: '工废', wasterCount: 1 }],
      },
      rules: {
        pickCount: [{ required: true, message: '请输入领料值', trigger: 'change' }],
      },

      typeArray: ['工废', '料废', '其他'],
      TaskList: [],
      visiblerank: false,
      visibequ: false,
      columnsequ: columnsequ,
      innerColumns: innerColumns,
      sequdata: [],
      selectedRowKeys: [],
      name: '',
      newTime: '', // 当前时间
      selectTime: '',
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onSelect: this.onSelect, //触发级联的方法
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
      };
    },

    // rowSelection() {
    //   return {
    //     onChange: (selectedRowKeys, selectedRows) => {
    //       this.selectedRowKeys=selectedRowKeys.split(',')
    //       // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    //     },
    //     getCheckboxProps: record => ({
    //       props: {
    //         disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //         name: record.name,
    //       },
    //     }),
    //   };
    // },
  },
  created() {
    if (this.$route.query && this.$route.query.selectTime) {
      this.params.day = this.$route.query.selectTime;
      this.selectTime = this.$route.query.selectTime;
    } else {
      this.params.day = timeCalculation(new Date(), 'subtract', 0);
    }
    if (this.$route.query && this.$route.query.selectIndex) {
      this.classesIndex = Number(this.$route.query.selectIndex);
    }
    this.newTime = moment(Date.now()).format('YYYY-MM-DD HH:mm:ss');
    initUserInfo(this);
    this.params.UserName = localStorage.getItem('userName');
    let roleId = localStorage.getItem('roleId');
    if (roleId == 1) {
      this.params.companyId = localStorage.getItem('compid');
    } else {
      this.params.companyId = localStorage.getItem('choseCompanyId');
    }

    this.calendarParams.startTime = this.params.startTime = formatCurrentMonth('start', 0);
    this.calendarParams.endTime = this.params.endTime = formatCurrentMonth('end', 0);
    this.getAllDay();
    this.getShiftByDay();
    this.getTaskList();
    // this.init();
    this.getEquGroup();
  },
  methods: {
    handleChange(pagination, filters, sorter) {
      this.filteredInfo = filters;
      this.sortedInfo = sorter;
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 判断是否打卡
    puchTime(start, end, signInTime, index) {
      var newStart = this.params.day + ' ' + start;
      newStart = moment(newStart)
        .subtract(20, 'minutes')
        .format('YYYY-MM-DD HH:mm:ss');
      var startStatus = this.moment(newStart).isBefore(this.newTime);
      var newEnd;
      if (index === 5) {
        newEnd =
          this.moment(this.params.day)
            .add(1, 'day')
            .format('YYYY-MM-DD') +
          ' ' +
          end;
      } else {
        newEnd = this.params.day + ' ' + end;
      }
      var endStatus = this.moment(this.newTime).isBefore(newEnd);
      if (startStatus && endStatus && signInTime == null) {
        return '未打卡';
      } else if (startStatus === false && endStatus && signInTime == null) {
        return '未打卡';
      } else if (signInTime !== null) {
        return '已打卡';
      } else {
        return '超时';
      }
    },
    onSelect(record, selected) {
      //每个复选框点击都会触发
      const selectrows = [record.key];
      if (record.hasOwnProperty('MacSNs')) {
        const generator = (record) => {
          //这里做一个递归查找
          record.forEach((item) => {
            selectrows.push(item.macsn);
            if (item.MacSNs && item.MacSNs.length > 0) {
              generator(item.MacSNs);
            }
          });
        };
        generator(record.MacSNs);
      }
      const newselect = this.selectedRowKeys.filter((item) => !selectrows.includes(item));
      //选中和取消选中的级
      selected ? (this.selectedRowKeys = [...this.selectedRowKeys, ...selectrows]) : (this.selectedRowKeys = newselect);
    },

    openequ(startTime, endTime, signInTime, index, item) {
      console.log(this.puchTime(startTime, endTime, signInTime, index));
      if (
        this.puchTime(startTime, endTime, signInTime, index) === '已打卡' ||
        this.puchTime(startTime, endTime, signInTime, index) === '超时'
      ) {
        return;
      } else {
        this.nowshift = item;
        this.visibequ = true;
      }
    },
    getEquGroup() {
      let params = {
        Username: this.params.UserName,
        compid: this.params.companyId,
      };
      api.CompanyGroupList(params).then((res) => {
        this.sequdata = res.Data;
      });
    },
    handleCancelequ() {
      this.visibequ = false;
      this.selectedRowKeys = [];
    },
    handleOkequ() {
      let macSNs = [];
      console.log(this.selectedRowKeys);
      if (this.selectedRowKeys.length > 0) {
        this.selectedRowKeys.forEach((item) => {
          if (item && item.length >= 10) {
            macSNs.push(item);
          }
        });
      } else {
        this.$message.error('请选择设备 ');
        return;
      }
      macSNs = Array.from(new Set(macSNs));

      let params = {
        macSNs: macSNs,
        username: this.params.UserName,
        shiftId: this.nowshift.shiftId,
        companyId: this.params.companyId,
        name: this.name,
      };
      api.signIn(params).then((res) => {
        if (res.msgCode == 0) {
          this.$message.info('打卡成功');
          this.visibequ = false;
          this.getShiftByDay();
          this.selectedRowKeys = [];
        } else {
          this.$message.info(res.msgDesc);
        }
      });
    },
    handleCancelrank() {
      this.visiblerank = false;
    },
    handleOkrank() {
      this.visiblerank = false;
    },
    opvisiblerank() {
      this.visiblerank = true;
      this.getProduceRank(1);
    },
    addfrom() {
      this.forms.wasters.push({ type: '工废', wasterCount: 1 });
    },
    detalfrom(index) {
      this.forms.wasters.splice(index, 1);
    },
    handletaskChange(id) {
      this.forms.taskId = id;
      let task = this.TaskList.find((item) => item.taskId == id);
      this.forms.taskInfo = task.taskInfo;
    },
    handleOk() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.forms.shiftId = this.nowshift.shiftId;
          this.forms.companyId = this.params.companyId;
          this.forms.username = this.params.UserName;
          console.log(this.forms);
          api.addMaterial(this.forms).then((res) => {
            if (res.msgCode == 0) {
              this.$message.info(res.msgDesc);
              this.visibleCheckIn = false;
            } else {
              this.$message.error(res.msgDesc);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    CheckIn() {
      this.visibleCheckIn = true;
    },
    handleCancel(e) {
      this.visibleCheckIn = false;
    },

    //班次日历
    getAllDay() {
      let params = {
        companyId: this.params.companyId,
        startTime: this.calendarParams.startTime,
        endTime: this.calendarParams.endTime,
      };
      this.haveAllDayList = false;
      wapi.getAllDay(params).then((res) => {
        this.haveAllDayList = true;
        this.getAllDayList = res.data;
      });
    },
    //当天班次列表
    getShiftByDay() {
      let params = {
        companyId: this.params.companyId,
        day: this.params.day,
        username: this.params.UserName,
      };
      api.getShiftByDay(params).then((res) => {
        if (res.data.length > 0) {
          this.ShiftList = res.data;
          console.log(this.ShiftList);
          this.nowshift = this.ShiftList[this.classesIndex];
          this.init();
        } else {
          this.ShiftList = [];
          this.initdata();
        }
      });
    },
    init() {
      this.getStateTime();
      this.getProduceRank();
      this.getProduceHour();
      this.getAllSignIn();
      this.getAllAlarm();
    },
    initdata() {
      this.pieData = [
        { value: '0', name: '运行', str: 0 },
        { value: '0', name: '总运行', str: 0 },
      ];
      this.getProduceHourData = {
        expectedData: [],
        date: [],
        name1: '产量',
      };
      this.SignInData = [];
      this.SignIntotal = 0;
      this.getAllAlarmData = [];
      this.getAllAlarmtotal = 0;
      this.ProduceRankData = [];
      this.ProduceRanktotal = 0;
    },
    //获取机床某时间段内的各个状态时间
    getStateTime() {
      let params = {
        companyId: this.params.companyId,
        startTime: this.params.day + ' ' + this.nowshift.startTime,
      };
      if (this.nowshift.startTime > this.nowshift.endTime) {
        params.endTime =
          moment(this.params.day)
            .subtract(-1, 'days')
            .format('YYYY-MM-DD') +
          ' ' +
          this.nowshift.endTime;
      } else {
        params.endTime = this.params.day + ' ' + this.nowshift.endTime;
      }
      api.getStateTime(params).then((res) => {
        this.pieData = [
          {
            value: res.data ? res.data.totalRealOnlineTime : 0,
            name: '运行',
            str: res.data ? res.data.totalRealOnlineTimeStr : 0,
          },
          {
            value: res.data ? res.data.totalHypoOnlineTime - res.data.totalRealOnlineTime : 0,
            name: '其他运行',
            str: res.data ? res.data.totalHypoOnlineTimeStr : 0,
          },
        ];
        this.StateTimeData = res.data;
      });
    },
    changepageRank(i) {
      this.ProduceRankParams.pageNum = i;
      this.getProduceRank(1);
    },
    //运行排名
    getProduceRank(type) {
      this.ProduceRankParams.startTime = this.params.day + ' ' + this.nowshift.startTime;
      this.ProduceRankParams.endTime = this.params.day + ' ' + this.nowshift.endTime;
      this.ProduceRankParams.companyId = this.params.companyId;
      api.getProduceRank(this.ProduceRankParams).then((res) => {
        let rows = res.data.rows;
        rows.forEach((item) => {
          let hour = parseInt(item.timeStamp / 60 / 60) + '小时';
          let mi = parseInt((item.timeStamp / 60) % 60) + '分钟';
          item.time = hour + mi;
        });
        if (type) {
          this.ProduceRankData = rows;
          this.ProduceRankDatatable = rows;
        } else {
          this.ProduceRankData = rows;
        }

        this.ProduceRanktotal = res.data.total;
      });
    },
    //折线图
    getProduceHour() {
      let params = {
        companyId: this.params.companyId,
        startTime: this.params.day + ' ' + this.nowshift.startTime,
        endTime: this.params.day + ' ' + this.nowshift.endTime,
        pageSize: 24,
        pageNum: 1,
      };
      api.getProduceHour(params).then((res) => {
        let list = res.data.hourData;
        let expectedData = [];
        let date = [];
        list.forEach((item) => {
          expectedData.push(item.count);
          date.push(item.hour);
        });
        this.getProduceHourData.expectedData = expectedData;
        this.getProduceHourData.date = date;
      });
    },
    changepageSignIn(page, size) {
      this.SignInParams.pageNum = page;
      this.getAllSignIn();
    },
    //打卡记录
    getAllSignIn() {
      this.SignInParams.shiftId = this.nowshift.shiftId;
      // this.SignInParams.shiftId=1;
      this.SignInParams.companyId = this.params.companyId;
      api.getAllSignIn(this.SignInParams).then((res) => {
        if (res.data.rows) {
          this.SignInData = res.data.rows;
        } else {
          this.SignInData = [];
        }
        this.SignIntotal = res.data.total;
      });
    },
    changepageAllAlarm(page, size) {
      this.getAllAlarmParams.pageNum = page;
      this.getAllAlarm();
    },
    //报警信息
    getAllAlarm() {
      this.getAllAlarmParams.startTime = this.params.day + ' ' + this.nowshift.startTime;
      this.getAllAlarmParams.endTime = this.params.day + ' ' + this.nowshift.endTime;
      this.getAllAlarmParams.companyId = this.params.companyId;
      api.getAllAlarm(this.getAllAlarmParams).then((res) => {
        this.getAllAlarmData = res.data.rows;
        this.getAllAlarmtotal = res.data.total;
      });
    },
    //获取当前领料对应的任务列表
    getTaskList() {
      api.getTaskList({ companyId: this.params.companyId }).then((res) => {
        this.TaskList = res.data;
      });
    },
    selectDay(value) {
      this.params.day = value.format('YYYY-MM-DD');
      this.getShiftByDay();
    },
    routerTo(url) {
      this.$router.push(url);
    },
    changeCLASS(i, item) {
      this.classesIndex = i;
      this.nowshift = item;
      this.init();
    },

    getdate(value) {
      let flag = false;
      flag = this.getAllDayList.find((item) => item == value.format('YYYY-MM-DD')) ? true : false;
      return flag;
    },
    onPanelChange(value) {
      let date = value.format('YYYY-MM-DD');
      let datelist = date.split('-');
      this.calendarParams.startTime = datelist[0] + '-' + datelist[1] + '-01';
      this.calendarParams.endTime = datelist[0] + '-' + datelist[1] + '-' + getLastDay(datelist[0], datelist[1]);
    },
    //  日历自定义头部
    headerRender({ value, type, onChange, onTypeChange }) {
      const start = 0;
      const end = 12;
      const monthOptions = [];

      const current = value.clone();
      const localeData = value.localeData();
      const months = [];
      for (let i = 0; i < 12; i++) {
        current.month(i);
        months.push(localeData.monthsShort(current));
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>
        );
      }
      const month = value.month();

      const year = value.year();
      const options = [];
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class="year-item">
            {i}
          </a-select-option>
        );
      }
      return (
        <div style={{ padding: '10px' }}>
          <a-row type="flex" justify="center">
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                class="my-year-select"
                onChange={(newYear) => {
                  const now = value.clone().year(newYear);
                  onChange(now);
                }}
                value={String(year)}
              >
                {options}
              </a-select>
            </a-col>
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                value={String(month)}
                onChange={(selectedMonth) => {
                  const newValue = value.clone();
                  newValue.month(parseInt(selectedMonth, 10));
                  onChange(newValue);
                  this.getAllDay();
                }}
              >
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      );
    },
  },
};
</script>

<style scoped lang="less">
@import 'index.less';
::v-deep .ant-table-row-expand-icon {
  color: #000 !important;
}
::v-deep .ant-modal-body {
  padding: 24px 24px 0 24px;
}
.footerBtn {
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: center;
  margin-left: 50px;
}
</style>
